<template>
	<view class="content">
		<myTab :initIndex="initIndex" :modelData="modelData" @change="tapChange" style="width: 100%;"></myTab>
		<view class="myquestion" v-for="(item,index) in myquestion" :key="index" @tap="go_detail(item.id)" v-show="isShow">
			<text class="title">{{item.questionTitle}}</text>
			<text class="bottom">{{item.answers}}回答</text>
		</view>
		<view v-if="myquestion.length!=0&&show" style="margin-bottom: 120upx;height: 80upx; font-size: 28upx;color: #999999;text-align: center; line-height: 80upx;width: 92;">{{firstContent}}</view>
		<view class="myanswer" v-for="(item,index) in myanswers" :key="index" v-if="!isShow" @tap="go_answer_detail(item.questionId,index)">
			<text class="tit">{{item.questionTitle}}</text>
			<text class="desc">{{item.content}}</text>
			<text class="del" @tap.stop="del(item.id,index)">删除</text>
		</view>
		<view v-if="myanswers.length!=0&&!isShow" style="margin-bottom: 120upx;height: 80upx; font-size: 28upx;color: #999999;text-align: center; line-height: 80upx;width: 92;">{{secondContent}}</view>
	</view>
</template>

<script>
	import utils from "../../static/js/utils.js"
	import myTab from "../../components/myTabs/myTabs.vue"
	import {
			mapState,
			mapMutations
		} from 'vuex';
	export default {
		components: {
			myTab
		},
		computed:{
			...mapState(['user']),
		},
		data() {
			return {
				myanswers: [],
				isShow: true,
				modelData: [{
						label: "我的提问"
					},
					{
						label: "我的回答"
					},

				],
				initIndex: 0,
				myquestion: [],
				firstPageId:1,
				firstContent:'',
				secondPageId:0,
				secondContent:''
			}
		},
		onReachBottom() {
			if(this.initIndex==0) {
				if(this.firstContent != '没有更多问题了') {
					let pId = this.firstPageId;
					this.getMyQuestion(pId + 1, 1);
				}
			}else{
				if(this.secondContent != '没有更多回答了') {
					let pId = this.secondPageId;
					this.getMyAnswer(pId + 1, 1);
				}
			}
		
		},
		onLoad() {
			this.getMyQuestion(0,1);
			this.getMyAnswer(0,0);
		},
		methods: {
			del(id,index){
				let that= this;
				uni.showModal({
					title: '通知提醒',
					content: '确认删除?',
					showCancel: true,
					cancelText: '手滑了',
					confirmText: '删除',
					success: res => {
						if(res.confirm) {
							utils.post("question/deleteanswer",{
								answerId:id,
								userId:that.user.id
							},function(data) {
								that.myanswers.splice(index,1);
								utils.successToast("删除成功");
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			go_answer_detail(id,index){
				if(this.myanswers[index].flag!=0) {
					utils.successToast("该问题已被删除");
				}else{
					this.go_detail(id);
				}
			},
			getMyQuestion(pageId,type){
				let that = this;
				utils.get("question/getuserquestion", {
					pageId:pageId,
					userId:this.user.id
				}, function(data) {
					if (type == 0) {
						that.firstContent = "";
						that.myquestion = data;
					} else {
						if (data.length == 0) {
							that.firstContent = "没有更多问题了"
						} else {
							that.myquestion.push.apply(that.myquestion, data);
							that.firstPageId++;
						}
							
					}
				});
			},
			getMyAnswer(pageId,type){
				let that = this;
				utils.get("question/getuseranswer", {
					pageId:pageId,
					userId:this.user.id
				}, function(data) {
					if (type == 0) {
						that.firstContent = "";
						that.myanswers = data;
					} else {
						if (data.length == 0) {
							that.secondContent = "没有更多回答了"
						} else {
							that.myanswers.push.apply(that.myanswers, data);
							that.secondPageId++;
						}
							
					}
				});
			},
			go_detail(id) {
				uni.navigateTo({
					url: 'questiondetail?questionId=' + id
				})
			},
			tapChange(val) {
				if (this.initIndex != val) {
					this.isShow = !this.isShow;
					this.initIndex = val;
				}

			}
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.myanswer {
		width: 100%;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		margin-top: 20upx;
	}

	.tit {
		font-size: 28upx;
		font-weight: 600;
		margin-left: 4%;
		margin-right: 4%;
		margin-top: 20upx;
	}

	.desc {
		font-size: 24upx;
		margin-left: 4%;
		margin-right: 4%;
		color: #999999;
		margin-bottom: 20upx;
		margin-top: 20upx;
	}

	.del {
		color: #ff0000;
		font-size: 20upx;
		height: 50upx;
		margin-left: 4%;
		margin-right: 4%;
	}

	.myquestion {
		width: 100%;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		height: 130upx;
		justify-content: space-between;
		margin-top: 20upx;

	}

	.title {
		font-size: 28upx;
		font-weight: 600;
		margin-left: 4%;
		margin-right: 4%;
		margin-top: 20upx;
	}

	.bottom {
		font-size: 22upx;
		color: #999999;
		margin-left: 4%;
		margin-right: 4%;
		margin-bottom: 20upx;
	}
</style>
